<template>
    <div class="products_probiotic">
        <Header/>
         <div class="second_show">
             <div class="img"></div>
             <div class="pages_w1470">
                 <div class="second_show_text products_1"  v-if="menudatalist">
                     <div class="second-title">
                         <p class="en">{{menudata.son[0].alias}}</p>
                         <p class="cn">{{menudata.son[0].name}}</p>
                     </div>
                     <div class="text" v-html="menudata.son[0].content"></div>
                 </div>
             </div>
             <i class="tips"></i>
         </div>

         <div class="second_box" v-if="menudatalist">
             <img src="../assets/images/s2.png" class="strengths-r">
             <div class="pages_w1470 pa-tb-5">
                 <div class="second-title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                     <p class="en">{{menudatalist[0].son[0].alias}}</p>
                     <p class="cn">{{menudatalist[0].son[0].name}}</p>
                 </div>
                 <div class="pc">
                     <ul class="ul core_strains_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                         <li v-for="(item,index) in menudatalist[0].son[0].data" :key="index" class="scale" v-show="index<3"><router-link :to="{path:item.source}"><img :src="$store.state.domain+item.pic"></router-link></li>
                     </ul>

                     <ul class="ul core_strains_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                         <li v-for="(item,index) in menudatalist[0].son[0].data" :key="index" class="scale" v-show="index>2"><router-link :to="{path:item.source}"><img :src="$store.state.domain+item.pic"></router-link></li>
                     </ul>
                 </div>
                 <div class="web">
                     <ul class="ul core_strains_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                         <li v-for="(item,index) in menudatalist[0].son[0].data" :key="index" class="scale" v-show="index<1"><router-link :to="{path:item.source}"><img :src="$store.state.domain+item.pic"></router-link></li>
                     </ul>

                     <ul class="ul core_strains_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                         <li v-for="(item,index) in menudatalist[0].son[0].data" :key="index" class="scale" v-show="index>0"><router-link :to="{path:item.source}"><img :src="$store.state.domain+item.pic"></router-link></li>
                     </ul>
                 </div>


                 <div class="second-title align-r  pa-tb-5 opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                     <p class="en">{{menudatalist[0].son[1].alias}}</p>
                     <p class="cn">{{menudatalist[0].son[1].name}}</p>
                 </div>

                 <ul class="ul other_materials_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                     <li v-for="(item,index) in menudatalist[0].son[1].data" :key="index" class="scale">
                         <div class="box">
                             <img :src="$store.state.domain+item.pic">
                             <p class="cn">{{item.name}}</p>
                             <p class="en">{{item.alias}}</p>
                         </div>
                     </li>
                 </ul>

             </div>
         </div>


        <Footer/>
    </div>
</template>




<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    computed: {
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(6)).length>100){
                return this.$store.getters.getmenudata(6)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(6)).length>100){
                return this.$store.getters.getmenudatalist(6)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
    }
}
</script>
